/*Цвет в CSS. https://metanit.com/web/html5/6.1.php
    фона элемента - background-color, цвета границы - border-color.
    ............................................
    
    Семейство шрифтов. https://metanit.com/web/html5/6.2.php
    
    устанавливает семейство шрифтов;  font-family: Arial, Verdana, Helvetica;
    Толщина шрифта                    font-weight: normal или dold
                                      font-style: italic;
                                      color: red;
                                      opacity:.8
    размер шрифта                   font-size:
    выравнивает текст        text-align: left;justify, center
                             vertical-align: bottom;
    
     Границы; https://metanit.com/web/html5/6.12.php
    устанавливает ширину границы  border-width:
    задает стиль линии границы    border-style:
    устанавливает цвет границы    border-color:  
                                  border-radius:*/
       
            /*Интервал между символами и словами*/
           p.smallLetterSpace { line-height: -1px;
                letter-spacing: -1px;
            }
           p.bigLetterSpace {
                letter-spacing: 3px;
            }
            p.smallWordSpace{
                word-spacing: -1px;
            }
            p.bigWordSpace{
                word-spacing: 5px;
            }
            h3{ opacity: 0.7;
    text-shadow: 5px 4px 3px #999;
           }
        
           /*Стилизац. списков*/
           ul.outside{
            width: 400px;
                list-style-position: outside;
            }
            ul.inside{
              width: 400px;
                list-style-position: inside;
            }
        
        /* Стилизация таблицы. Управление размером таблицы*/
           table {
                  border: 1px solid blue;/* граница всей таблицы */
                  border-spacing: 3px;             /*устанавливает промежутки между границами смежных ячеек*/
                  table-layout: fixed;             /*определяет размеры таблицы*/
                  width:350px; text-align: center; 
                 }
         
        td, th{
            border:1px solid orange;/* границы между столбцами */
            vertical-align: bottom;
            height: 30px;
        }
        .collapsed{
            border-collapse: collapse;
        }
    
        .hidden-empty-cells{
            empty-cells: hide; caption-side: bottom;
           
        }
        /*-Стилизация таблиц-*/
        caption{color:brown; font-weight: bold;text-align: left; }

      
  /*всплывающее окно*/
        #zatemnenie {
        background: rgba(102, 102, 102, 0.5);
      width:100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
		
      }
      #okno {
        width: 300px; 
        height:80px;
        text-align: center;
        padding: 15px;
        border: 3px solid #0000cc;
        border-radius: 10px;
        color: #0000cc;
        position: fixed;
        top: 20%;
        right: 0;
        bottom: 0;
        left: 50%;
        
        background: #fff;
      }
      #zatemnenie:target {display: block;}
      .close { 
        display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
 
 /*Создание тени у элемента*/
 .div{width: 328px;
            height: 96px;
            margin: 20px;
            border: 1px solid #ccc;
            background-color: #eee;
            box-shadow: 10px 4px 10px 3px #888;}

            /*раздерлитель*/
      hr{margin-top: 70px;}
   
       /*Пример обтекания элементов*/		 
 .image { 
    float:left; /* обтекание слева */
    margin:0px 10px 0px 0px;
  
}

.sidebar{ /* обтекание справа */
    border: 2px solid #ccc;
    background-color: #eee;
    width: 200px;
    padding: 10px;
    margin-left:10px;
    font-size: 20px;
    float: right;
}
.footer{
    border-top: 1px solid #ccc;  
clear:both;
}

/*Прокрутка элементов*/
       .article{
            width: 300px;
            height: 150px;
            margin:15px;
            border: 1px solid #ccc;
            overflow: auto;
        }
	
	/*--градиент--*/

        .grdient_line {
            float: left;
            width: 200px;
            height: 160px;
            background-color: #eee;
            background-image: linear-gradient(left,black,white);
            background-image: -o-linear-gradient(left,black,white);
            background-image: -moz-linear-gradient(left,black,white);
            background-image: -webkit-linear-gradient(left,black,white);
           

        }
            
        .gradient_radial {
            float: right;
            width: 160px;
            height: 160px;
            border-radius: 80px;
            background-color: #eee;
            background-image: radial-gradient(white, black);
            background-image: -moz-radial-gradient(white, black);
            background-image: -webkit-radial-gradient(white, black);
        }      
                              


       
        .p_gradient{ 
            padding-top: 25%;
            text-align: center;
            color:black;}